<template>
  <div >
    <el-dialog :visible.sync="createData.isShow" width="800px"  :title='createData.title' 
    :close-on-click-modal="false"
    @close="closeBranch"
    @open="openBranch"
    >
    <div v-loading="loading">
      <el-card style='overflow:visible'>
        <div slot="header" class="clearfix">
          <span>上级机构</span>
        </div>
        <el-form ref="branchformFather" :model="branch" size="mini" label-width="90px" label-position="left" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="12">  
              <el-form-item label="法人行号:"  prop="legalpersonnum">
                <el-input v-model="branch.legalpersonnum" :disabled="true"  placeholder="请输入法人行号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" >  
            <el-form-item label="分行号:" prop="zonenum">
              <el-input v-model="branch.zonenum" :disabled="createData.isDisabled" placeholder="请输入分行号" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span='12' >  
            <el-form-item label="上级机构号:" prop="supebranchnum">
              <el-select v-model="branch.supebranchnum" :disabled="createData.isDisabled" filterable placeholder="请选择上级机构号" >
                  <el-option
                  v-for="item in brnoListFather"
                  :key="item.value"
                  :label="item.cname"
                  :value="item.orgno">
                  </el-option>
                </el-select>
              <!-- <el-input v-model="branch.supebranchnum" :disabled="createData.isDisabled"   placeholder="请输入机构名称"></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card >
      <el-card style='margin-top:10px;'>
        <div slot="header" class="clearfix">
          <span>机构信息</span>
        </div>
        <el-form ref="branchform" :model="branch" size="mini" :rules="rules" label-width="120px" label-position="left">
          <el-row :gutter="20">
            <el-col :span="12">  
               <el-form-item label="机构号:"  prop="branchnum">
               <!-- <el-select v-model="branch.branchnum" :disabled="createData.isDisabled"  filterable placeholder="请选择所属机构号" >
                  <el-option
                  v-for="item in brnoList"
                  :key="item.value"
                  :label="item.orgno+'-'+item.cname"
                  :value="item.orgno">
                  </el-option>
                </el-select> -->
                <el-input v-model="branch.branchnum" :disabled="createData.isDisabled"   placeholder="请输入机构号"></el-input> 
              </el-form-item>
            </el-col>
            <el-col :span="12" >  
            <el-form-item label="机构名称:" prop="branchname">
              <el-input v-model="branch.branchname"   placeholder="请输入机构名称" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span='12' >  
              <el-form-item label="机构简称:" prop="branchabbr">
              <el-input v-model="branch.branchabbr"   placeholder="请输入机构简称"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span='12' >  
              <el-form-item label="机构属性:" prop="branchattr">
                <el-select v-model="branch.branchattr"  placeholder="请选择机构属性" >
                  <el-option
                  v-for="item in brnoProp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                  </el-option>
                </el-select>        
              </el-form-item>
            </el-col>
          </el-row>
           <el-row :gutter="20">
            <el-col :span='12' >  
              <el-form-item label="机构级别:" prop="branchlevel">
                <el-select v-model="branch.branchlevel"  placeholder="请选择机构级别" >
                  <el-option
                  v-for="item in brnoLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled">
                  </el-option>
                </el-select>        
              </el-form-item>
            </el-col>
            <el-col :span='12' >  
              <el-form-item label="机构负责人:" prop="branchpersonincharge">
              <el-input v-model="branch.branchpersonincharge"   placeholder="请输入机构负责人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span='12' >  
              <el-form-item label="负责人电话:" prop="personinchargecontactphone">
              <el-input v-model="branch.personinchargecontactphone"   placeholder="请输入负责人电话"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span='12' >  
              <el-form-item label="金融许可证:" prop="finapermit">
                 <el-input v-model="branch.finapermit" :disabled="createData.isDisabled"   placeholder="请输入金融许可证"></el-input>                        
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span='12' >  
              <el-form-item label="经度:" prop="gpscoor_long">
              <el-input v-model="branch.gpscoor_long"   placeholder="请输入经度"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span='12' >  
              <el-form-item label="纬度:" prop="gpscoor_lati">
                <el-input v-model="branch.gpscoor_lati"   placeholder="请输入纬度"></el-input>    
              </el-form-item>
            </el-col>
          </el-row>
           <el-row :gutter="20">
               <el-col :span="12">
                <el-form-item label='开业日期:' prop='dateopen'>
                  <el-date-picker
                    v-model="branch.dateopen"
                    value-format="yyyyMMdd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
               </el-col>
               <el-col :span="12">
                <el-form-item label='生效日期:' prop='effedate'>
                  <el-date-picker
                    v-model="branch.effedate"
                    value-format="yyyyMMdd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="12">
                <el-form-item label='失效日期:' prop='expidate'>
                  <el-date-picker
                    v-model="branch.expidate"
                    value-format="yyyyMMdd"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
               </el-col>
               <el-col :span="12">
                <el-form-item label='机构IP检查标志:' prop='branchipcheckmark'>
                  <el-select v-model="branch.branchipcheckmark"  placeholder="请选择机构IP检查标志" >
                    <el-option
                    v-for="item in checkMark"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                    </el-option>
                  </el-select>    
                </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-row :gutter="20">
            <el-col :span='12' >  
              <el-form-item label="机构联系人姓名:" prop="branchcontactname">
              <el-input v-model="branch.branchcontactname"   placeholder="请输入机构联系人姓名"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span='12' >  
              <el-form-item label="机构联系人电话:" prop="branchcontactphone">
                 <el-input v-model="branch.branchcontactphone"    placeholder="请输入机构联系人电话"></el-input>                        
              </el-form-item>
            </el-col>
          </el-row>
            <el-col :span='24' >  
              <el-form-item label="交通信息:" prop="trafficinfo">
              <el-input v-model="branch.trafficinfo"   placeholder="请输入交通信息"></el-input>
              </el-form-item>
            </el-col>
             <el-col :span='24' >  
              <el-form-item label="地址:" prop="branchaddr">
                <el-input v-model="branch.branchaddr"   placeholder="请输入地址"></el-input>                   
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card >
      <el-row style="margin:20px 0;text-align:right">
        <el-button size="mini" @click="createData.isShow=false">取消</el-button>                        
        <el-button type="primary" size="mini" @click="addArea">确认</el-button>
      </el-row>
    </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/common/utils/request";
import areaInfoQuery from "@/message/branchManage/areaManage/areaAdd";
import devRunList from "@/message/spinnerDataQuery/spinner-data-query";
import addBranch from "@/message/branchManage/branch/branch-info-add";
import updateBranch from "@/message/branchManage/branch/branch-info-update";
import getGlobalParams from "@/common/utils/getGlobalParams";
import toolBox from "@/common/utils/toolBox";
import branchList from "@/message/shared/branch-list";//机构号

export default {
  props: { createData: Object },
  data() {
    let validatorPhone = (rule, value, callback) => {
      //校验电话
      if (value != "" ){
        let regtel = /(^[1][3,4,5,6,7,8,9][0-9]{9}$)|(^[0]\d{2}[-]\d{7,8}$)/;
        let regPhone = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/
        if (regtel.test(value) || regPhone.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的联系电话"));
        }
      } else {
        callback();
      }
    };
    let enddateCheck = (rule, value, callback) => { //自定义表单验证 校验IP地址
      if (value != "") {
        let time = toolBox.getNowTime(0);
        if (value - time >= 0 && value - this.branch.effedate >= 0) {
          callback();
        } else {
          callback(new Error("失效日期必须大于当前日期和生效日期"));
        };
         
      } else {
        callback();
      }
    };
    return {
      brnoList:[],
      brnoListFather:[],      
      brnoLevel:[],
      checkMark:[
        {value:"0",label:"0-关闭"},
        {value:"1",label:"1-开启"}
      ],//检查标志
      loading: false, 
      // branchInfo: [],
      brnoProp: [],
      branch: {
        branchcontactname:"",
        branchcontactphone:"",
        branchnum: "",
        branchname: "",
        branchabbr: "",
        branchattr: "",
        branchlevel: "",
        finapermit: "",
        gpscoor_lati: "",
        gpscoor_long: "",
        branchaddr: "",
        branchpersonincharge: "",
        personinchargecontactphone: "",
        dateopen: "",
        effedate: "",
        expidate: "",
        branchipcheckmark:"",
        trafficinfo:"",
        supebranchnum:"",
        zonenum:"",
        legalpersonnum:"FR001"
      },
      rules: {
        branchnum: [
          { required: true, message: "机构号必填！", trigger: "change" }
        ],
        branchname: [
          { required: true, message: "机构名称必填！", trigger: "blur" }
        ],
        branchabbr: [
          { required: true, message: "机构简称必填！", trigger: "blur" },
        ],
        branchattr: [
          { required: true, message: "机构属性必填！", trigger: "change" }
        ],
        branchlevel: [
          { required: true, message: "机构级别必填！", trigger: "change" }
        ],
        branchId: [
          { required: true, message: "上级机构必填！", trigger: "change" }
        ],
        legalpersonnum:[
          { required: true, message: "法人行号必填！", trigger: "blur" }
        ],
        zonenum:[
          { required: true, message: "分行号必填！", trigger: "blur" }
        ],
        supebranchnum:[
          { required: true, message: "上级机构号必填！", trigger: "change" }
        ],
        branchpersonincharge:[
          { required: true, message: "机构负责人必填！", trigger: "blur" }
        ],
        dateopen:[
          { required: true, message: "开业日期必填！", trigger: "change" }
        ],
        effedate:[
          { required: true, message: "生效日期必填！", trigger: "change" }
        ],
        expidate:[
          { required: true, message: "失效日期必填！", trigger: "change" }
        ],
        personinchargecontactphone: [
          { required: true, message: "负责人电话必填！", trigger: "blur" },
          {
            message: "负责人电话长度少于20个字符",
            max: 20,
            trigger: "blur",
          },
          {
            validator: validatorPhone,
            trigger: "blur"
          }
        ],
        branchcontactphone: [
          { required: true, message: "机构联系人电话必填！", trigger: "blur" },
          {
            message: "机构联系人电话长度少于20个字符",
            max: 20,
            trigger: "blur",
          },
          {
            validator: validatorPhone,
            trigger: "blur"
          }
        ],
        expidate: [ {validator: enddateCheck,trigger: 'blur',required: true}],
      }
    };
  },
  created() {
    this.brnoProp = getGlobalParams.get("brnoProp");
    this.brnoLevel= getGlobalParams.get("brnoLevel");
  },
  methods: {
    initList() {  //初始化机构
      let resBody = new branchList();
      resBody.data.orgno=this.$store.getters.BranchNum;
      request(resBody)
      .then(response => {
        this.brnoList = response.RspInfo.Result||[];
        this.brnoListFather=JSON.parse(JSON.stringify(this.brnoList))
      })
      .catch(error => {
        console.error("查询错误", error);
      });
    },
    openBranch() {
      if (this.createData.logo=="2") {        
        this.branch=JSON.parse(JSON.stringify(this.createData.currentRow)) ;
      }else{
        this. branch={
        branchcontactname:"",
        branchcontactphone:"",
        branchnum: "",
        branchname: "",
        branchabbr: "",
        branchattr: "",
        branchlevel: "",
        finapermit: "",
        gpscoor_lati: "",
        gpscoor_long: "",
        branchaddr: "",
        branchpersonincharge: "",
        personinchargecontactphone: "",
        dateopen: "",
        effedate: "",
        expidate: "",
        branchipcheckmark:"",
        trafficinfo:"",
        supebranchnum:"",
        zonenum:"",
        legalpersonnum:"FR001"
      }
      }
      this.initList()
    },
    closeBranch() {
      this.$refs.branchform.clearValidate(); //清楚表单验证
      this.$refs.branchform.resetFields(); //清楚表单数据
      this.$refs.branchformFather.clearValidate(); //清楚表单验证
      this.$refs.branchformFather.resetFields(); //清楚表单数据
      
    },
    addArea() {  //添加机构
      this.$refs["branchform"].validate(valid => {
        if (valid) {
          this.loading = true;
          let resBody =this.createData.logo == "1"? new addBranch():new updateBranch();
          resBody.data.BranchContactName=this.branch.branchcontactname;
          resBody.data.BranchContactPhone=this.branch.branchcontactphone;
          resBody.data.BranchNum= this.branch.branchnum;
          resBody.data.BranchName= this.branch.branchname;
          resBody.data.BranchAbbr= this.branch.branchabbr;
          resBody.data.BranchAttr= this.branch.branchattr;
          resBody.data.BranchLevel= this.branch.branchlevel;
          resBody.data.FinaPermit= this.branch.finapermit;
          resBody.data.GpsCoor_Long= this.branch.gpscoor_long;
          resBody.data.GpsCoor_Lati= this.branch.gpscoor_lati;
          resBody.data.BranchAddr= this.branch.branchaddr;
          resBody.data.BranchPersonInCharge= this.branch.branchpersonincharge;
          resBody.data.PersonInChargeContactPhone= this.branch.personinchargecontactphone;
          resBody.data.DateOpen= this.branch.dateopen;
          resBody.data.EffeDate= this.branch.effedate;
          resBody.data.ExpiDate= this.branch.expidate;
          resBody.data.BranchIpCheckMark= this.branch.branchipcheckmark;
          resBody.data.TrafficInfo= this.branch.trafficinfo;
          resBody.data.SupeBranchNum= this.branch.supebranchnum;
          resBody.data.ZoneNum= this.branch.zonenum;
          resBody.data.LegalPersonNum= this.branch.legalpersonnum;
            request(resBody)
              .then(response => {
                if (response.APP_HEAD.ReturnCode === "000000") {
                  this.loading = false;
                  let msg=this.createData.logo== "1"?"创建":"修改"
                  this.$message({
                    type: "success",
                    message:`机构${msg}成功!` 
                  });
                  this.createData.isShow = false;
                  this.$emit("refreshTable");
                } else {
                  this.$message({
                    type: "success",
                    message: `${response.SYS_HEAD.ReturnMessage}!`
                  });
                  this.loading = false;
                }
              })
              .catch(error => {
                this.loading = false;
                console.log(error);
              });
        }
      });
    }
  }
};
</script>
